<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            border-collapse: collapse;
            table-layout: fixed;
            border-radius: 5px;
            overflow: hidden;
            margin: 10px auto;
            border: 2px solid #70aefb;
            background-color: #328ef4;
            color: #c7dafb;
            width: 1200px;
        }

        table td,
        th {
            /* padding: 5px;
		width: 33%; */
            text-align: center;
            border: 1px solid #70aefb;
            vertical-align: middle;
            /* font-size: 15px; */
            /* width: 80%; */
        }

        .table-color-green {
            background-color: green;

        }

        .table-color-grey {

            background-color: #696969;
        }

        .table-color-black {

            background-color: black;
        }

        .jt-up-color {
            color: red;
        }

        .parent-position {
            position: relative;
        }

        .child-position {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .main-font {
            font-size: 23px;
        }

        .gao {
            color: red;
            border-color: red;
        }

        .span {
            margin: 0 auto;
        }

        .span span {
            padding: 0 5px;
            margin: 0 5px;
            border: 1px solid;

        }
    </style>
</head>

<body>
    <div class="top">
        每页显示<select name="" id="" class="pai">
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
        </select>条
        根据<select name="" id="sort">
            <option value="0">全部</option>
            <option value="1">性别</option>
            <option value="2">年龄</option>
            <option value="3">学号</option>
            <option value="4">成绩</option>

        </select>排序
    </div>
    <table class="">
        <thead>
            <!-- age: 21
            code: 20070001
            name: "金娟"
            result: 10 -->
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>总分</td>
            </tr>
        </thead>
        <tbody>


        </tbody>

    </table>
    <div class="btm">
        <button id="a">首页</button>
        <button id="c">上一页</button>
        <span class="span"></span>

        <button id="d">下一页</button>
        <button id="b">尾页</button>
    </div>
</body>

</html>
<script src="../../commonPort/ajax.js"></script>

<script>
    function $(a) { return document.querySelector(a) }
    function abc(a) { return [...document.querySelectorAll(a)] }

    //默认显示页数
    let nums = 1, num2 = 10;
    q(nums, num2)
    function q(nums, num2) {
        obj.get({
            url: "/getstudent",
            text: {
                start: nums,
                end: num2,
                sort: $("#sort").value
            },
            callback
        })
    }
    function callback(strdata) {

        let { state, num, data } = JSON.parse(strdata)
        console.log(state, num, data);
        if (state === "001" || state === "002") {
            document.querySelector("tbody").innerHTML = ``
            data.forEach(function (item, i) {
                document.querySelector("tbody").innerHTML += `<tr>
            <td>${item.id}</td>
            <td>${item.naem}</td>
            <td>${item.sex % 2 === 0 ? "男" : "女"}</td>
            <td>${item.age}</td>
            <td>${item.Verbal}</td>
            <td>${item.mathe}</td>
            <td>${item.English}</td>
            <td>${item.sum}</td>
        </tr>`
            });
         

            rederer(num, nums)

        }
        //渲染底部
        $(".btm").onclick = function (e) {
            if (e.target.id === "a") {
                nums = 1;
            }
            if (e.target.id === "c") {
                nums--
                if (nums <= 0) {
                    nums = 1
                }
            }
            if (e.target.id === "d") {
                nums++
                if (nums >= num) {
                    nums = num
                }
            }
            if (e.target.id === "b") {
                nums = num;
            }
            if (e.target.nodeName === "SPAN") {
                nums = e.target.innerHTML
            }
            // brr = arr.slice($(".pai").value*(num-1),$(".pai").value*num)
            // reder(brr)
            q(nums, num2)
            rederer(num, nums)

        }

    }
    //添加给导航事件
    $(".top").onchange = function (e) {

        num2 = $(".pai").value
        //  brr = arr.slice($(".pai").value*(num-1),$(".pai").value*num)
        console.log($(".pai").value);
        // reder(brr)
        // rederer(Math.ceil(arr.length/num2),num)
        q(nums, num2)
    }



    function rederer(num, index) {
        console.log(num, index);
        var index = parseInt(index)
        var num = parseInt(num)
        document.querySelector(".span").innerHTML = ""
        var str = "";
        // debugger;
        for (var i = 0; i < 5; i++) {
            if (index - 3 >= 0 && index + 4 < num) {
                str += '<span class="' + (index === index - 2 + i ? "gao" : "") + '">' + (index - 2 + i) + '</span>'
            } else if (index + 4 >= num) {
                str += '<span  class="' + (index === num - 4 + i ? "gao" : "") + '">' + (num - 4 + i) + '</span>'
            } else {
                str += '<span  class="' + (index === i + 1 ? "gao" : "") + '">' + (1 + i) + '</span>'
            }


        }
        if (index + 4 < num) {
            str += '<span>......</span><span>' + num + '</span>'
        }
        document.querySelector(".span").innerHTML = str


    }

</script>